<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>state练习-简易轮播图</title>
    <style>
        .container{
            width: 640px;
            height: 360px;
            margin: 50px auto;
            border:solid 1px #ddd;
            position: relative;
        }

        .btn{
            user-select: none !important;
            position:absolute;
            width: 60px;
            height: 60px;
            background: white;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
        }

        .left{
            left: 0;
        }
        .right{
            right: 0;
        }

    </style>
</head>
<body>
    <div id="root">
        
    </div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>

    <script type="text/babel">
        
        class App extends React.Component{

            state = {
                images:[

                ],
                index: 1
            }
            // 1 + N  git stash
            render(){
                return <div className="container">
                            <img src={'./images/'+this.state.index+'.jpg'} width="100%" alt="" />
                            <div className="btn left" onClick={this.prev}>&lt;</div>
                            <div className="btn right" onClick={this.next}>&gt;</div>
                        </div>
            }

            prev = () => {
                let {index} = this.state;
                index--;
                //
                if(index < 1) index = 5;
                this.setState({
                    index
                })
            }

            next = () => {
                //修改 index 的值
                let {index} = this.state;
                //自增 index 的值
                index = index + 1;
                //判断
                if(index > 5) index = 1;
                //修改 index 状态的值
                this.setState({
                    index
                })
            }

        }

        ReactDOM.render(<App />, document.querySelector("#root"));
    </script>
</body>
</html>